<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="head">
        <script type="text/javascript">
            function skinChart() {
                this.cfg.shadow = false;
                this.cfg.seriesColors = ['#dae8ef', '#27aae1'];
                this.cfg.grid = {
                    background: '#f3f5f7',
                    borderColor: '#e5ebf0',
                    gridLineColor: '#e5ebf0',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#9fadb5'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    markerOptions: {
                        shadow: false
                    }
                }
            }

            function skinPie() {
                this.cfg.seriesColors = ['#dae8ef', '#27aae1', '#33ccff', '#9fadb5'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#eaeaea',
                    gridLineColor: '#e5ebf0',
                    shadow: false,
                    borderWidth: 0
                };
                this.cfg.seriesDefaults.shadow = false;
            }
        </script>
        <style type="text/css">
            .jqplot-target, .jqplot-axis {
                color: #9fadb5;
            }
        </style>
    </ui:define>

    <ui:define name="content">
        <div class="Container100">
            <div class="ContainerIndent">
                <div class="EmptyBox20"/>

                <div class="Container25 Responsive">
                    <div class="ContainerIndent">
                        <p:panel style="min-height: 300px;">
                            <i class="icon-user-2 Fs50 Fleft Wid25 hardblue TexAlCenter"/>
                            <div class="Fs24 Fright MarTop10 leaden Wid70"><span class="hardblue">Walter White</span>, Welcome</div>
                            <div class="Fs12 Fright leaden Wid70">You have <span class="red">3 unread messages</span> and <span class="red"> 32 tasks</span> !</div>
                            <div class="EmptyBox10"/>
                            <p:separator styleClass="Wid100"/>
                            <div class="EmptyBox10"/>
                            <div class="Fs16 Fright">
                                <a href="#" class="DispInlBlock Fleft Fs16 MarRight20"><i class="icon-briefcase hardblue"> Tasks (32)</i></a>
                                <a href="#" class="DispInlBlock Fleft Fs16 MarRight20"><i class="icon-bell-alt hardblue"> Messages (3)</i></a>
                                <a href="#" class="DispInlBlock Fleft Fs16 MarRight20"><i class="icon-cog-alt hardblue"> Settings</i></a>
                            </div>
                            <div class="EmptyBox10"/>
                            <p:separator styleClass="Wid100"/>
                            <div class="EmptyBox10"/>
                            <i class="icon-key softgray MarRight10 Fs14 Fright"> Your Last Login - 18.08.2014, 18:30</i>
                            <div class="EmptyBox10"/>
                            <p:separator styleClass="Wid100"/>
                        </p:panel>
                    </div>
                </div>

                <div class="Container25 Responsive">
                    <div class="ContainerIndent">
                        <p:panel style="min-height: 300px;">
                            <i class=" icon-data-science-inv Fs50 Fleft Wid25 orange TexAlCenter"/>
                            <div class="Fs24 Fright MarTop10 leaden Wid70">Visitors Report</div>
                            <div class="Fs12 Fright leaden Wid70">Today <span class="red">2.280</span> visitors,<span class="red">15%</span> higher than last week</div>
                            <div class="EmptyBox10"/>
                            <p:separator styleClass="Wid100"/>
                            <div class="EmptyBox10"/>
                            <div class="Fs12 Fright leaden Wid50 TexAlCenter Responsive">Overall Visits<br /><span class="Fs24 orange">13.760</span></div>
                            <div class="Fs12 Fright leaden Wid50 TexAlCenter Responsive">Today's Visits<br /><span class="Fs24 red">2.280</span></div>
                            <div class="Fs12 Fright leaden Wid100 TexAlCenter">Online Visitors<br /><span class="Fs24 hardblue">134</span></div>
                            <div class="EmptyBox10"/>
                            <p:separator styleClass="Wid100"/>
                            <a href="#" class="DispInlBlock Fs14 Fright MarRight10"><i class="icon-doc-1 orange"> Get Full Report</i></a>
                        </p:panel>
                    </div>
                </div>

                <div class="Container25 Responsive">
                    <div class="ContainerIndent">
                        <p:panel style="min-height: 300px;">
                            <i class="icon-rocket Fs50 Fleft Wid25 red TexAlCenter"/>
                            <div class="Fs24 Fright MarTop10 leaden Wid70">Sales Report</div>
                            <div class="Fs18 Fright leaden Wid70">Totally <span class="red">$ 132.875,45</span></div>
                            <div class="EmptyBox10"/>
                            <p:separator styleClass="Wid100"/>
                            <div class="EmptyBox10"/>
                            <div class="Fs12 Fright leaden Wid50 TexAlCenter Responsive">4th Quarter<br /><span class="Fs20 orange">--</span></div>
                            <div class="Fs12 Fright leaden Wid50 TexAlCenter Responsive">3rd Quarter<br /><span class="Fs20 orange">$13.760</span></div>
                            <div class="Fs12 Fright leaden Wid50 TexAlCenter Responsive">2nd Quarter<br /><span class="Fs20 red">$23.567</span></div>
                            <div class="Fs12 Fright leaden Wid50 TexAlCenter Responsive">1st Quarter<br /><span class="Fs20 hardblue">$2.370</span></div>
                            <div class="EmptyBox10"/>
                            <p:separator styleClass="Wid100"/>
                            <a href="#" class="DispInlBlock Fs14 Fright MarRight10"><i class="icon-doc-1 orange"> Get Full Report</i></a>
                        </p:panel>
                    </div>
                </div>

                <div class="Container25 Responsive">
                    <div class="ContainerIndent">
                        <p:panel style="min-height:300px">
                            <div class="Fs24 MarTop10 leaden Wid100 TexAlCenter">Customer Report</div>
                            <p:chart type="pie"
                                     model="#{chartView.pieModel}"
                                     responsive="true"
                                     style="height:200px" />
                        </p:panel>
                    </div>
                </div>

                <div class="EmptyBox10"/>
            </div>
        </div>

        <div class="Container100 BorBotLeaden ui-fluid">
            <div class="ContainerIndent">
                <div class="EmptyBox10"/>

                <div class="Container50 Responsive50">
                    <div class="ContainerIndent">
                        <p:panel style="min-height:400px;">
                            <div class="Container100 Responsive Fs20">
                                <i class="icon-chart-bar"/> Visits Chart
                            </div>
                            <div class="Container100">
                                <p:chart type="line"
                                         model="#{chartView.lineModel}"
                                         responsive="true"
                                         style="height:300px;margin-top:10px"/>
                            </div>
                        </p:panel>
                    </div>
                </div>

                <div class="Container50 Responsive50">
                    <div class="ContainerIndent">
                        <p:panel style="min-height:400px;">
                            <div class="Container">
                                <div class="Container50 Responsive Fs20">
                                    <i class="icon-doc-text"/> Cars Sales Ranks
                                </div>
                                <div class="Container50 Responsive Fs12">
                                    <p:selectCheckboxMenu value="#{checkboxView.selectedCountries}"
                                                          label="Filter With Country"
                                                          filter="true"
                                                          filterMatchMode="startsWith"
                                                          styleClass="Fright">
                                        <f:selectItems value="#{checkboxView.countries}" />
                                    </p:selectCheckboxMenu>
                                </div>
                                <div class="EmptyBox10"/>
                                <div class="Container100">
                                    <h:form id="form">
                                        <p:dataTable id="singleDT"
                                                     var="car"
                                                     value="#{dtSelectionView.cars1}"
                                                     rows="5"
                                                     pageLinks="5"
                                                     paginator="true"
                                                     paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">
                                            <p:column headerText="Id" sortBy="#{car.id}">
                                                <h:outputText value="#{car.id}" />
                                            </p:column>
                                            <p:column headerText="Year" sortBy="#{car.year}">
                                                <h:outputText value="#{car.year}" />
                                            </p:column>
                                            <p:column headerText="Brand" sortBy="#{car.brand}">
                                                <h:outputText value="#{car.brand}" />
                                            </p:column>
                                            <p:column headerText="Color" sortBy="#{car.color}">
                                                <h:outputText value="#{car.color}" />
                                            </p:column>
                                        </p:dataTable>
                                    </h:form>
                                </div>
                            </div>
                        </p:panel>
                    </div>
                </div>

                <div class="EmptyBox20"/>
            </div>
        </div>

        <div class="Container100 leaden-back BorBotLeaden">
            <div class="ContainerIndent">
                <div class="EmptyBox10"/>

                <div class="Container20 Responsive">
                    <div class="ContainerIndent">
                        <p:panel>
                            <div class="Wid100 TexAlCenter">
                                <div class="ContainerIndent">
                                    <p:graphicImage value="#{resource['demo:images/audi.jpg']}" styleClass="Wid100" />
                                    <div class="EmptyBox10"/>
                                    <span class="Fs20 DispBlock hardblue">
                                        Audi A8<br />
                                        <span class="Fs12 softgray">Sales Chart - Group At By Color</span>
                                    </span>
                                </div>
                            </div>
                        </p:panel>
                    </div>
                </div>

                <div class="Container20 Responsive">
                    <div class="ContainerIndent">
                        <p:panel>
                            <div class="Wid100 TexAlCenter">
                                <div class="ContainerIndent">
                                    <p:graphicImage value="#{resource['demo:images/bmw.jpg']}" styleClass="Wid100" />
                                    <div class="EmptyBox10"/>
                                    <span class="Fs20 DispBlock hardblue">
                                        BMW i8 <br />
                                        <span class="Fs12 softgray">Sales Chart - Group At By Color</span>
                                    </span>
                                </div>
                            </div>
                        </p:panel>
                    </div>
                </div>

                <div class="Container20 Responsive">
                    <div class="ContainerIndent">
                        <p:panel>
                            <div class="Wid100 TexAlCenter">
                                <div class="ContainerIndent">
                                    <p:graphicImage value="#{resource['demo:images/aston.jpg']}" styleClass="Wid100" />
                                    <div class="EmptyBox10"/>
                                    <span class="Fs20 DispBlock hardblue">
                                        Aston Martin DB9<br />
                                        <span class="Fs12 softgray">Sales Chart - Group At By Color</span>
                                    </span>
                                </div>
                            </div>
                        </p:panel>
                    </div>
                </div>

                <div class="Container40 Responsive">
                    <div class="ContainerIndent">
                        <p:panel>
                            <div class="Container100 Fs20">
                                <i class="icon-chart-bar"/> Bugatti Veyron Specs
                            </div>
                            <div class="EmptyBox10"/>
                            <p:accordionPanel>
                                <p:tab title="Engine Power ( HP )">
                                    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film,
                                    The_Godfather, parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
                                    deepening The_Godfather's depiction of the dark side of the American dream.
                                    In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family.
                                    Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy,
                                    killing the local Black Hand Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone,
                                    Vito's communal stature grows.
                                </p:tab>
                                <p:tab title="Transmission">
                                    Francis Ford Coppola's legendary. Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film,
                                    The_Godfather, parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
                                    deepening The_Godfather's depiction of the dark side of the American dream.
                                    In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family.
                                    Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy,
                                    killing the local Black Hand Fanucci after he demands his customary cut of the tyro's business.
                                    With Fanucci gone, Vito's communal stature grows.
                                </p:tab>
                                <p:tab title="0-100">
                                    After a break of more than 15 years. Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film,
                                    The_Godfather, parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
                                    deepening The_Godfather's depiction of the dark side of the American dream.
                                    In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family.
                                    Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy,
                                    killing the local Black Hand Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone,
                                    Vito's communal stature grows.
                                </p:tab>
                                <p:tab title="Wheels">
                                    After a break of more than 15 years. Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film,
                                    The_Godfather, parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
                                    deepening The_Godfather's depiction of the dark side of the American dream.
                                    In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family.
                                    Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy,
                                    killing the local Black Hand Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone,
                                    Vito's communal stature grows.
                                </p:tab>
                                <p:tab title="Cruise Control">
                                    After a break of more than 15 years. Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film,
                                    The_Godfather, parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
                                    deepening The_Godfather's depiction of the dark side of the American dream.
                                    In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family.
                                    Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy,
                                    killing the local Black Hand Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone,
                                    Vito's communal stature grows.
                                </p:tab>
                                <p:tab title="Parking Sensors And Auto Parking System">
                                    After a break of more than 15 years. Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film,
                                    The_Godfather, parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
                                    deepening The_Godfather's depiction of the dark side of the American dream.
                                    In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family.
                                    Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy,
                                    killing the local Black Hand Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone,
                                    Vito's communal stature grows.
                                </p:tab>
                                <p:tab title="Other Specs">
                                    After a break of more than 15 years. Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film,
                                    The_Godfather, parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
                                    deepening The_Godfather's depiction of the dark side of the American dream.
                                    In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family.
                                    Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy,
                                    killing the local Black Hand Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone,
                                    Vito's communal stature grows.
                                </p:tab>
                            </p:accordionPanel>
                        </p:panel>
                    </div>
                </div>

                <div class="EmptyBox10"/>
            </div>
        </div>
    </ui:define>
</ui:composition>